<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/logo.jpg"><span onclick="close_plan();">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
            <li id="price0">¥159.00</li> 
            <li>
                <input type="button" name="minus" value="-" onclick="minus(0);">
                <input type="text" name="amount" value="5">
                <input type="button" name="plus" value="+" onclick="plus(0);">
            </li>
            <li>¥<input type="text" name="price" value="159.00"></li>
           
        </ul>
        <ul>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
            <li id="price1">¥159.00</li>
            <li>
                <input type="button" name="minus" value="-" onclick="minus(1);">
                <input type="text" name="amount" value="5">
                <input type="button" name="plus" value="+" onclick="plus(1);">
            </li>
            <li>¥<input type="text" name="price" value="159.00"></li>
            
            
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span onclick="accounts();">结 算</span></li>
        </ol>
    </div>
</div>
<script>
    // 带参函数  num = 0  or  num = 1 
    function minus(num){
        // 数组
        var count = document.getElementsByName("amount")[num].value; // 返回页面中包含name='amount' 的所有元素
        if(count == 1){
            alert('不能再减了，再减就没有了')
        } else {
            count = count - 1;
        }
        document.getElementsByName("amount")[num].value = count;

        // 小计
        xiaoji();
    }

    function plus(num) {
        var count = document.getElementsByName("amount")[num].value; 
        // 加法的判断要以实际库存为准 走后台查询 去数据库查一下库存有没有这么多
        count = parseInt(count) + 1;
        document.getElementsByName("amount")[num].value = count;

        // 小计
        xiaoji();
    }

    // 小计 + 合计
    function xiaoji(){
        var counts = document.getElementsByName("amount");
        var prices = document.getElementsByName("price");
        var total = 0;

        for (let num = 0; num < counts.length; num++) {
            document.getElementById('price'+num).innerHTML = "￥" + (counts[num].value * prices[num].value);
            total = total + (counts[num].value * prices[num].value);
        }

        document.getElementById("totalPrice").innerHTML = "￥" + total;

    }
    xiaoji();

    // 合计结算
    function accounts(){
        xiaoji();
    }

</script>
</body>
</html>